<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .one>li {
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            line-height: 50px;
            text-align: center;
            border: 3px solid;
            margin: 0px 5px;
        }

        .blue {
            border-color: #0000FF;
            color: #0000ff;
        }

        .red {
            border-color: #ff0000;
            color: #ff0000
        }
    </style>
</head>
<body>
    <section id="box">
    </section>
    <script>
        let red = [];
        let blue = [];

        let box = document.querySelector("#box");
        
        // 红球：1-33 篮球：1-16
        for (let i = 1;i <= 33;i ++) {
            red.push(i);
            if (i <= 16) {
                blue.push(i);
            }
        }

        // 获取随机数：[0,max)
        function getRandom(max) {
            return Math.floor(Math.random() * max);
        }

        // 随机一注双色球
        function getOne() {
            // 将红色球的池子，拷贝到新数组中
            let red2 = [];
            for (let v of red) {
                red2.push(v);
            }

            let result = [];
            // 随机六个红色球
            for (let i = 0;i < 6;i ++) {
                let index = getRandom(red2.length);
                let value = red2.splice(index,1);
                result.push(value[0]);
            }

            // 排序
            result.sort(function(n,m) {
                return n - m;
            })

            // 添加蓝球
            let index = getRandom(blue.length);
            result.push(blue[index]);

            
            createDom(result);

        }

        function createDom(a) {
            console.log(a);
            let ul = document.createElement("ul");
            ul.classList.add("one");
            for (let i in a) {
                let li = document.createElement("li");
                let classList = li.classList;
                // 最后一个：蓝球
                if (i == a.length - 1) {
                    classList.add("blue");
                // 红球
                } else {
                    classList.add("red");
                }
                li.innerText = a[i];
                ul.appendChild(li);
            }
            box.append(ul);
        }


        // 投注的注数
        let num = 5;
        for (let i = 0;i < num;i ++) {
            getOne();
        }
        

    </script>
</body>
</html>